<template>
  <div class="contend guideContend">
    <div class="container">
      <div class="topTitleTab">
        <span>当前位置：首页 > 指南</span>
      </div>
      <div class="contendBox">
        <div class="contendLeft">
          <!-- banner -->
          <section
            v-swiper:mySwiper="swiperOption"
            class="swiper-container banner"
          >
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="(item, idx) in bannerData"
                :key="idx"
              >
                <img :src="item.imgUrl" />
              </div>
            </div>
          </section>
          <!-- 学车指南 -->
          <section class="guideC">
            <div class="guidecontainer">
              <div class="tab">
                <div
                  :class="tabindex == i ? 'tabItem acStyle' : 'tabItem '"
                  v-for="(tabItem, i) in tablist"
                  :key="i"
                  @click="changeTab(i, tabItem)"
                >
                  <span class="titleColor curp">{{ tabItem.title }}</span>
                </div>
              </div>
              <div class="tabcontent">
                <articleItem   v-if="articleList.length > 0" v-for="(articleItem, i) in articleList"
                  :key="i" :articleItem='articleItem'></articleItem>
               
                <el-pagination
                 v-if="articleList.length > 0"
                  @size-change="handleSizeChange"
                  :current-page.sync="page"
                  @current-change="handleCurrentChange"
                  :page-sizes="[10, 20]"
                  :page-size="10"
                  background
                  layout="total, sizes, prev, pager, next"
                  :total="pagination.total"
                >
                </el-pagination>
                 <div class="nodataBox" v-if="articleList.length == 0">
              <img src="~/assets/images/nodata.png" alt="" />
              <span class="tips">暂无数据</span>
            </div>
              </div>
            </div>
          </section>
        </div>
        <div class="right">
            <div class="cardBox"  v-if="schoolListQw.length>0">
            <div class="title">
              <span>推荐驾校 </span>
            </div>
            <div class="cardContend">
              <div
                class="authority"
                v-for="(authority, i) in schoolListQw"
                :key="i"
              >
                <div class="authorityleft">
                  <span :class="i > 2 ? 'soltNum soltNumnor' : 'soltNum'">{{
                    i + 1
                  }}</span>
                  <nuxt-link
                    :to="{
                      name: 'school-schoolDetails-id',
                      query: { schoolId: authority.id },
                    }"
                  >
                    <span v-if="i != 0" class="curp">{{
                      authority.short_title
                    }}</span>
                  </nuxt-link>
                </div>
                <span class="people" v-if="i != 0"
                  >{{ authority.sCount }}人</span
                >
                <div class="right" v-if="i == 0">
                  <img :src="authority.head_img" alt="" class="schoolImg" />
                  <div class="content firstContent">
                    <nuxt-link
                      :to="{
                        name: 'school-schoolDetails-id',
                        query: { schoolId: authority.id },
                      }"
                    >
                      <span class="contenttitle curp">{{
                        authority.short_title
                      }}</span>
                    </nuxt-link>
                    <div class="starBox">
                      <img
                        src="~/assets/images/rankstar.png"
                        alt=""
                        v-for="num in authority.cAvg"
                        :key="num"
                      />
                      <img
                        v-if="authority.cAvg < 5"
                        src="~/assets/images/rankstarhui.png"
                        alt=""
                        v-for="num in 5 - authority.cAvg"
                        :key="num"
                      />
                    </div>
                    <span class="tips">{{ authority.address }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="cardBox" v-if="sortCoachList.length>0">
            <div class="title">口碑教练排行榜</div>
            <div class="card">
              <sortCoach
                v-for="(item, i) in sortCoachList"
                :key="i"
                :coachItem="item"
                :sortNum="i"
              ></sortCoach>
            </div>
          </div>
        
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import formSearch from "@/components/formSearch.vue";
import sortCoach from "@/components/sortCoach.vue";
import { articleOption, article, school, coach } from "~/api/commen";
import articleItem from "@/components/articleItem.vue";
export default {
  components: {
    formSearch,
    sortCoach,
    articleItem
  },
  data() {
    return {
      tabindex: 0,
      bannerData: [
        {
          imgUrl: require("~/assets/images/guide1.png"),
        },
        {
          imgUrl: require("~/assets/images/guide2.png"),
        },
      ],
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        slidesPerView: "auto",
        centeredSlides: true,
        spaceBetween: 30,

        on: {
          slideChange() {},
          tap() {},
        },
      },
      page: 1,
      rows: 10,
      category:0
    };
  },

  async asyncData({ app, query, params }) {
    // let data = await cityfilter({ level: 3, parent_id: 2 });
    let [tablist, articleList, sortCoachList, schoolListQw] = await Promise.all(
      [
        await articleOption(),
        await article({ page: 1, rows: 10, category: 0 }),
        await coach({ page: 1, rows: 5, order: "score"}),
        await school({ page: 1, rows: 5 }),
      ]
    );

    return {
      tablist: tablist,
      articleList: articleList.list,
      pagination: articleList.page,
      sortCoachList: sortCoachList.list,
      schoolListQw: schoolListQw.list,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.rows = val;
      this.getarticleList(this.category);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getarticleList(this.category);
    },
    // 学车指南切换
    changeTab(val, tabItem) {
      this.tabindex = val;
      this.page = 1;
      this.category=tabItem.id
      this.getarticleList(this.category);
    },
    async getarticleList(category) {
      let articleList = await article({
        page: this.page,
        rows: this.rows,
        category: category,
      });

      this.articleList = articleList.list;
       this.pagination=articleList.page
    },
  },
  mounted(){

  }
};
</script>

<style scoped lang='scss'>
@import "~/assets/css/guide.scss";
::v-deep {
  .el-pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>